<template>
  <div>
    <!-- <el-row class="Control-container" :class="theme"> -->
    <el-card class="card-content" shadow="hover" :class="userInfoStore.$state.theme">
      <div class="card-container">
        <!-- 左边：图片 -->
        <div class="card-left">
          <img v-if="prop.device.DeviceImages" :src="`${baseURL}/${prop.device.DeviceImages}`" />
          <el-empty v-else description="加载失败" style="width: 113px; height: 113px"></el-empty>
        </div>
        <!-- 右边:信息 -->
        <div class="card-right">
          <!-- 第一行 -->
          <div class="right-title">
            <!-- 左边文字 -->
            <div class="title">
              <p class="hidden">
                <span class="main-title">{{ prop.device.DeviceName }}
                  <span class="titleSpace" v-if='prop.device.DeviceLocation'>-</span>
                </span>

                <span class="production-line" v-if='prop.device.DeviceLocation'>{{ prop.device.DeviceLocation }}</span>
              </p>
              <!-- </el-tooltip> -->
              <p class="secondline">{{ prop.device.TerminalName }} ({{ prop.device.TerminalIdentity }}）</p>
            </div>
            <!-- 右边绿色 -->
            <div class="status" @mouseenter="showHoverDiv" @mouseleave="hideHoverDiv">
              <!-- 如果状态为work 1 :开检 -->
              <span v-if="WorkStatus?.WorkStatus == 'Work'">
                <img src="../../assets/status/running.svg" alt="开检">
              </span>
              <!-- 如果状态为standby  2 :待机-->
              <span v-if="WorkStatus?.WorkStatus == 'Standby'">
                <img src="../../assets/status/waiting.svg" alt="待机">
              </span>
              <!-- 如果状态为Fault  3  :故障-->
              <span v-if="WorkStatus?.WorkStatus == 'Fault'">
                <img src="../../assets/status/bad.svg" alt="故障">
              </span>
              <!-- 如果状态为Offline   4 : 离线-->
              <span v-if="WorkStatus?.WorkStatus == 'Offline'">
                <img src="../../assets/status/outline.svg" alt="离线">
              </span>
              <div class="hover-div" :class="{ 'show': isHover }">
                <p>
                  <img src="../../assets/status/running.svg" alt="开检">
                  开检
                </p>
                <p>
                  <img src="../../assets/status/waiting.svg" alt="故障">
                  待机
                </p>
                <p>
                  <img src="../../assets/status/bad.svg" alt="故障">
                  故障
                </p>
                <p>
                  <img src="../../assets/status/outline.svg" alt="离线">
                  离线
                </p>
              </div>
            </div>

          </div>
          <!-- 第二行 -->
          <div class="card-number">
            <div class="number">
              <h6 v-if="!Dashboard?.TotalCount">0</h6>
              <h6 v-else>{{ Dashboard?.TotalCount }}</h6>
              <p>检测总数</p>
            </div>
            <div class="number-padding">
              <h6 v-if="!Dashboard?.QualifiedRate">0%</h6>
              <h6 v-else>{{ Dashboard?.QualifiedRate / 10 }}%</h6>
              <p>好品率</p>
            </div>
            <div class="numberRight">
              <h6 v-if="!Dashboard?.ProductionEfficiency">0</h6>
              <h6 v-else>{{ Dashboard?.ProductionEfficiency }}</h6>
              <p>效率/时</p>
            </div>
          </div>
          <!-- 第三行 -->
          <div class="card-icon">
            <div class="icon">
              <!-- CPU使用率 -->
              <el-popover placement="top" trigger="hover" class="iconBG">
                <div class="iconContent">
                  <p>CPU使用率：<span style="color:#1ea368;font-weight:900">{{ Hardware?.CPUsUsage ? Hardware?.CPUsUsage : 0 }}%</span></p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#ff636b"></path>
                    </svg>
                    <span class="fontsize">满:95% - 100%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#f2994a"></path>
                    </svg>
                    <span class="fontsize">高:75% - 94%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#1aa367"></path>
                    </svg>
                    <span class="fontsize">正常:1% - 74%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#bfbfbf"></path>
                    </svg>
                    <span class="fontsize">离线:无数据 - 0%</span>
                  </p>
                </div>
                <template #reference>
                  <img v-if='Hardware?.CPUsUsage > 74 && Hardware?.CPUsUsage < 95' src="../../assets/useRate/CPU2.svg" alt="cpu使用率" />
                  <img v-if='Hardware?.CPUsUsage > 0 && Hardware?.CPUsUsage < 75' src="../../assets/useRate/CPU3.svg" alt="cpu使用率" />
                  <img v-if='Hardware?.CPUsUsage > 94 && Hardware?.CPUsUsage < 101' src="../../assets/useRate/CPU4.svg" alt="cpu使用率"
                    style="width: 24px; height: 24px; margin-top: 4px;cursor: pointer;" />
                  <img v-else src="../../assets/useRate/CPU1.svg" alt="cpu使用率" />
                </template>
              </el-popover>
              <!-- GPU使用率 -->
              <el-popover placement="top" trigger="hover">
                <div class="iconContent">
                  <p>GPU使用率：<span style="color:#1ea368;font-weight:900">{{ Hardware?.GPUsUsage ? Hardware?.GPUsUsage : 0 }}%</span></p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#ff636b"></path>
                    </svg>
                    <span class="fontsize">满:95% - 100%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#f2994a"></path>
                    </svg>
                    <span class="fontsize">高:75% - 94%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#1aa367"></path>
                    </svg>
                    <span class="fontsize">正常:1% - 74%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#bfbfbf"></path>
                    </svg>
                    <span class="fontsize">离线:无数据 - 0%</span>
                  </p>
                </div>
                <template #reference>
                  <img v-if='Hardware?.GPUsUsage > 74 && Hardware?.GPUsUsage < 95' src="../../assets/useRate/GPU2.svg" alt="GPU使用率" />
                  <img v-if='Hardware?.GPUsUsage > 0 && Hardware?.GPUsUsage < 75' src="../../assets/useRate/GPU3.svg" alt="GPU使用率" />
                  <img v-if='Hardware?.GPUsUsage > 94 && Hardware?.GPUsUsage < 101' src="../../assets/useRate/GPU4.svg" alt="GPU使用率" />
                  <img v-else src="../../assets/useRate/GPU1.svg" alt="GPU使用率" />
                </template>
              </el-popover>
              <!-- RAM使用率 -->
              <el-popover placement="top" trigger="hover">
                <div class="iconContent">
                  <p>RAM使用率：<span style="color:#1ea368;font-weight:900">{{ Hardware?.MemoryUsage ? Hardware?.MemoryUsage : 0 }}%</span></p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#ff636b"></path>
                    </svg>
                    <span class="fontsize">满:95% - 100%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#f2994a"></path>
                    </svg>
                    <span class="fontsize">高:75% - 94%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#1aa367"></path>
                    </svg>
                    <span class="fontsize">正常:1% - 74%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#bfbfbf"></path>
                    </svg>
                    <span class="fontsize">离线:无数据 - 0%</span>
                  </p>
                </div>
                <template #reference>
                  <img v-if='Hardware?.MemoryUsage > 74 && Hardware?.MemoryUsage < 95' src="../../assets/useRate/RAM2.svg" alt="RAM使用率" />
                  <img v-if='Hardware?.MemoryUsage > 0 && Hardware?.MemoryUsage < 75' src="../../assets/useRate/RAM3.svg" alt="RAM使用率" />
                  <img v-if='Hardware?.MemoryUsage > 94 && Hardware?.MemoryUsage < 101' src="../../assets/useRate/RAM4.svg" alt="RAM使用率" />
                  <img v-else src="../../assets/useRate/RAM1.svg" alt="RAM1使用率" />
                </template>
              </el-popover>
              <!-- HHD使用率 -->
              <el-popover placement="top" trigger="hover">
                <div class="iconContent">
                  <p>HHD使用率：<span style="color:#1ea368;font-weight:900">{{ Hardware?.DiskUsage ? Hardware?.DiskUsage : 0 }}%</span></p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#ff636b"></path>
                    </svg>
                    <span class="fontsize">满:95% - 100%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#f2994a"></path>
                    </svg>
                    <span class="fontsize">高:75% - 94%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#1aa367"></path>
                    </svg>
                    <span class="fontsize">正常:1% - 74%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#bfbfbf"></path>
                    </svg>
                    <span class="fontsize">离线:无数据 - 0%</span>
                  </p>
                </div>
                <template #reference>
                  <img v-if='Hardware?.DiskUsage > 74 && Hardware?.DiskUsage < 95' src="../../assets/useRate/HHD2.svg" alt="HHD使用率" />
                  <img v-if='Hardware?.DiskUsage > 0 && Hardware?.DiskUsage < 75' src="../../assets/useRate/HHD3.svg" alt="HHD使用率" />
                  <img v-if='Hardware?.DiskUsage > 94 && Hardware?.DiskUsage < 101' src="../../assets/useRate/HHD4.svg" alt="HHD使用率" />
                  <img v-else src="../../assets/useRate/HHD1.svg" alt="RAM1使用率" style="width: 24px; height: 24px; margin-top: 4px" />
                </template>
              </el-popover>
              <!-- NET使用率 -->
              <el-popover placement="top" trigger="hover">
                <div class="iconContent">
                  <p>NET使用率：<span style="color:#1ea368;font-weight:900">{{ Hardware?.NetworkUsage ? Hardware?.NetworkUsage : 0 }}%</span></p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#ff636b"></path>
                    </svg>
                    <span class="fontsize">满:95% - 100%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#f2994a"></path>
                    </svg>
                    <span class="fontsize">高:75% - 94%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#1aa367"></path>
                    </svg>
                    <span class="fontsize">正常:1% - 74%</span>
                  </p>
                  <p>
                    <svg t="1688605622354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2128" width="12" height="12">
                      <path
                        d="M830.464 63.488q26.624 0 50.176 12.288t41.472 31.232 28.672 43.008 10.752 46.592l0 635.904q0 23.552-11.264 46.592t-30.208 41.472-43.008 30.208-48.64 11.776l-641.024 0q-22.528 0-44.544-10.752t-39.424-28.16-28.16-40.96-10.752-50.176l0-633.856q0-25.6 10.752-50.176t29.696-43.52 43.52-30.208 52.224-11.264l629.76 0z"
                        p-id="2129" fill="#bfbfbf"></path>
                    </svg>
                    <span class="fontsize">离线:无数据 - 0%</span>
                  </p>
                </div>
                <template #reference>
                  <img v-if='Dashboard?.NetworkUsage > 74 && Dashboard?.NetworkUsage < 95' src="../../assets/useRate/NET2.svg" alt="NET使用率" />
                  <img v-if='Dashboard?.NetworkUsage > 0 && Dashboard?.NetworkUsage <= 74' src="../../assets/useRate/NET3.svg" alt="NET使用率" />
                  <img v-if='Dashboard?.NetworkUsage >= 95 && Dashboard?.NetworkUsage < 101' src="../../assets/useRate/NET4.svg" alt="NET使用率" />
                  <img v-else src="../../assets/useRate/NET1.svg" alt="RAM1使用率" />
                </template>
              </el-popover>
            </div>
            <div v-if="!Terminal" class="btn">详情</div>
            <router-link v-else class="btn" :to="`/details/${Terminal}`">详情</router-link>
          </div>
        </div>
      </div>
      <!-- 故障报警 -->
      <!-- 条件还未完成 -->
      <div v-show="AlarmInfo" id="Pop-up-warning">
        <span> </span>
        <p class="Pop-up-warning-center">
          <span>
            <!-- 警告标志 -->
            <svg t="1687765686238" class="icon exclamation-point" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3288" width="28" height="28">
              <path
                d="M597.333333 119.466667c0 4.266667 8.533333 12.8 21.333334 34.133333s25.6 42.666667 42.666666 76.8 38.4 64 59.733334 102.4c21.333333 38.4 46.933333 76.8 68.266666 115.2 21.333333 38.4 46.933333 81.066667 68.266667 119.466667 21.333333 38.4 42.666667 76.8 64 106.666666 17.066667 34.133333 34.133333 59.733333 51.2 85.333334s21.333333 38.4 29.866667 46.933333c8.533333 17.066667 17.066667 34.133333 17.066666 51.2 4.266667 17.066667 0 29.866667-4.266666 46.933333s-12.8 25.6-21.333334 34.133334c-12.8 8.533333-25.6 12.8-42.666666 12.8L89.6 951.466667c-25.6 0-46.933333-4.266667-59.733333-12.8-12.8-8.533333-21.333333-21.333333-25.6-34.133334-4.266667-12.8-4.266667-29.866667 0-42.666666 4.266667-17.066667 8.533333-29.866667 21.333333-46.933334 4.266667-8.533333 12.8-21.333333 25.6-46.933333 12.8-21.333333 29.866667-51.2 51.2-81.066667 21.333333-34.133333 42.666667-68.266667 64-106.666666 21.333333-38.4 46.933333-81.066667 72.533333-119.466667s46.933333-81.066667 68.266667-119.466667c21.333333-38.4 42.666667-72.533333 59.733333-102.4 17.066667-29.866667 34.133333-55.466667 46.933334-76.8l21.333333-34.133333c8.533333-12.8 21.333333-25.6 38.4-34.133333 17.066667-8.533333 29.866667-12.8 46.933333-12.8s29.866667 4.266667 46.933334 8.533333c8.533333 4.266667 21.333333 17.066667 29.866666 29.866667zm-25.6 196.266666c0-8.533333 0-17.066667-4.266666-21.333333-4.266667-8.533333-8.533333-12.8-12.8-17.066667-4.266667-4.266667-12.8-8.533333-21.333334-12.8s-17.066667-8.533333-25.6-8.533333c-17.066667 0-29.866667 4.266667-42.666666 17.066667s-21.333333 25.6-21.333334 42.666666l0 264.533334c0 17.066667 8.533333 29.866667 21.333334 42.666666s25.6 17.066667 42.666666 17.066667 29.866667-4.266667 42.666667-17.066667c12.8-12.8 21.333333-25.6 21.333333-42.666666l0-264.533334zm-64 384c-17.066667 0-34.133333 4.266667-42.666666 17.066667s-17.066667 25.6-17.066667 42.666667 4.266667 34.133333 17.066667 42.666666c12.8 12.8 25.6 17.066667 42.666666 17.066667s34.133333-4.266667 42.666667-17.066667c12.8-12.8 17.066667-25.6 17.066667-42.666666s-4.266667-34.133333-17.066667-42.666667c-8.533333-12.8-25.6-17.066667-42.666667-17.066667z"
                fill="#ffffff" p-id="3289"></path>
            </svg>
          </span>
          {{ AlarmInfo ? AlarmInfo.AlarmMessage : '' }}
        </p>
        <!-- 关闭按钮 -->
        <span class="close">
          <svg @click="handlerWarning" t="1687766962611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4478" width="25" height="25">
            <path d="M794.8 794.8c-14 14-36.9 14-50.9 0L229.2 280.1c-14-14-14-36.9 0-50.9s36.9-14 50.9 0L794.9 744c13.9 13.9 13.9 36.8-0.1 50.8z" fill="#ffffff" p-id="4479"></path>
            <path d="M794.8 229.2c14 14 14 36.9 0 50.9L280.1 794.8c-14 14-36.9 14-50.9 0s-14-36.9 0-50.9L744 229.1c13.9-13.9 36.8-13.9 50.8 0.1z" fill="#ffffff" p-id="4480"></path>
          </svg>
        </span>

      </div>
    </el-card>
    <!-- </el-row> -->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed, inject, watch, watchEffect, onUnmounted } from "vue";
import { RouterLink } from 'vue-router';
import { useUserInfoStore } from "@/stores/userInfo";
import { useRoute } from "vue-router";
// serverConfig.json是一个JSON格式的配置文件，用于存储服务器的配置信息
import serverConfig from "../../../serverConfig.json";
//获取设备的卡片式综合数据
import { useDevicesStore } from "@/stores/devices";
// 获取设备小仓库
const devicesStore = useDevicesStore();
const userInfoStore = useUserInfoStore();
onMounted(async () => {
  // 获取设备卡片的综合数据
  await getdevice()
  await getprodevent()
});
// 是否有后台返回的图片
const show = ref(true);
// 状态的提示框
const isHover = ref(false)
// 接收父组件传过来的数据
const props = defineProps(["device", "devicecardWebscoket", 'alarmcardWebscoket']);
const prop: any = ref(props);
// 定义基础路径
const baseURL = `http://${serverConfig.server.ip}:${serverConfig.server.port}${serverConfig.server.apiPath}`;
// 定义该卡片的终端标识符
const TerminalIdentity = ref<any>([]);
// 定义该卡片的内容
const Dashboard = ref<any>({})
const Hardware = ref<any>({})
const WorkStatus = ref<any>({})
const Terminal = ref<any>('')
const AlarmInfo = ref<any>()
const xiaoyu = ref(true)
const dayu = ref(false)
// 将该卡片的终端标识符放入定义的数组中
TerminalIdentity.value.push(prop.value.device.TerminalIdentity)
//获取设备卡片的综合数据的功能函数
const getdevice = async () => {
  if (!prop.value.device.TerminalIdentity) return
  await devicesStore.deviceinfo(prop.value.device.TerminalIdentity);
  // 如果请求成功就从数据里面拿当前卡片的数据
  TerminalIdentity.value.map((value1: any) => {
    const deviceinfo = deviceInfo.value.find((item1: any) => {
      return item1.TerminalIdentity == value1
    })
    Terminal.value = deviceinfo.TerminalIdentity
    Dashboard.value = deviceinfo.StatisticResults
    Hardware.value = deviceinfo.Hardware
    WorkStatus.value = deviceinfo.WorkStatus
  })
}

// 告警信息的回调函数
const alarmFun = () => {
  const matchingItem = prop.value.alarmcardWebscoket.find((item: any) => TerminalIdentity.value.includes(item.TerminalIdentity));
  AlarmInfo.value = matchingItem
}

// 根据设备终端标识符查询最后一条生产事件信息
const getprodevent = async () => {
  if (!prop.value.device.TerminalIdentity) return
  await devicesStore.lastProdevent(prop.value.device.TerminalIdentity)
}

// 从仓库拿数据
const deviceInfoRef: any = ref(computed(() => devicesStore.$state.deviceInfo));
const deviceInfo = ref(deviceInfoRef)
// if(prop.value.devicecardWebscoket){
//   deviceInfo.value = prop.value.devicecardWebscoket
// }
// watch(()=>prop.value.devicecardWebscoket, (value) => {
//   console.log(value,'9');

//   Dashboard.value = prop.value.devicecardWebscoket
// }, {
//   immediate: true
// })

watch(prop.value.devicecardWebscoket, (value) => {
  if (value.length > 0) {
    //   console.log(value, '9');
    TerminalIdentity.value.map((value1: any) => {
      const deviceinfo = value.find((item1: any) => {
        return item1.TerminalIdentity == value1
      })
      // 对拿到的卡片内容进行存储
      Dashboard.value = deviceinfo?.StatisticResults
      Hardware.value = deviceinfo?.Hardware
      WorkStatus.value = deviceinfo?.WorkStatus
    })
  }
}, {
  immediate: true
})

watch(() => prop.value.alarmcardWebscoket, (value) => {
  alarmFun()
}, {
  immediate: true
})

// 将告警信息关闭
const handlerWarning = () => {
  AlarmInfo.value = '';
};
// 鼠标经过状态提示框显示
const showHoverDiv = () => {
  isHover.value = true
}

// 鼠标离开状态提示框隐藏
const hideHoverDiv = () => {
  isHover.value = false
}


watchEffect(() => {
  const handleResize = () => {
    if (window.innerHeight > 1080) {
      dayu.value = true
      xiaoyu.value = false
    } else {
      xiaoyu.value = true;
      dayu.value = false
    }

    // 监听窗口大小变化
    window.addEventListener('resize', handleResize);

    // 在组件卸载时移除事件监听
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });
  }
  });
</script>

<style scoped lang="scss">
@font-face {
  font-family: DINCond-Medium;
  src: url(../../assets/font/DINCond-Medium.otf);
}

@import '@/assets/styles/controlmode/controlmode-light.scss';
@import '@/assets/styles/controlmode/controlmode-dark.scss';

@media screen and (max-width: 1600px) {}

:deep(.el-card__body) {
  padding: 0;
}

:deep(.el-tooltip__trigger) {
  margin-right: 22px;
}

/*激活的状态*/
.active {
  color: #f2994a;
}

.card-content {
  /* width: 586px;*/
  position: relative;
  /*width: 597px;
    height: 232px;*/
  /*卡片高度-8*/
  border-radius: 4px;
  border: none;
  margin: 0 0px 24px 0px;
  height: 24vh;
  padding: 15px 16px 20px 20px;
}

.fontsize {
  font-size: 8px;
  padding-left: 10px;
}


.theme1 {
  background: #FFFFFF;
  box-shadow: 0px 3px 6px 0px rgba(58, 58, 58, 0.05);
  @import '@/assets/styles/controlmode/controlmode-light.scss';
}

.theme2 {
  background: #292930;
  @import '@/assets/styles/controlmode/controlmode-dark.scss';
}

.card-content:hover {
  border-radius: 4px;
  box-shadow: 0px 6px 16px 0px rgba(96, 97, 112, 0.16), 0px 2px 6px 0px rgba(40, 41, 61, 0.03);
}

#Pop-up-warning {
  position: absolute;
  top: 40%;
  left: 0%;
  background: #ff636b;
  height: 48px;
  width: 32vw;
  /*597px*/
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 24px;
  opacity: 0.9;
  letter-spacing: 2px;

  .exclamation-point {
    margin-right: 20px;
  }

  .Pop-up-warning-center {
    display: flex;
    align-items: center;
  }

  .close {
    cursor: pointer;
  }
}
</style>